<template>
  <footer class="page-footer flex-align-items">
    <div class="container-fluid">
      <div class="public-text-center">
        <span class="footer-text">{{companyInfo.footerText}}</span>&nbsp;
        <v-copyright></v-copyright>
      </div>

      <div class="public-text-center">
        <a v-text="$t('pro.public.footer.Terms')" @click="termsOfUse"></a>
        &nbsp;
        {{$t('pro.public.footer.And')}}
        &nbsp;
        <a
          v-text="$t('pro.public.footer.PrivacyPolicy')"
          @click="privacyPolicy"
        ></a>
      </div>
    </div>
    <look-html :title="$t('pro.public.footer.Terms')" :config="configTO"></look-html>
    <look-html :title="$t('pro.public.footer.PrivacyPolicy')" :config="configPP"></look-html>
  </footer>
</template>
<script>
import vCopyright from "./Copyright";
import lookHtml from "./custom/LookHtml";

import { getTermsOfUse, getPrivacyPolicy } from "../../api/pulldown-data";

export default {
  components: {
    vCopyright,
    lookHtml
  },
  data() {
    return {
      configTO: {
        isOpen: false,
        htmlCode: ""
      },
      configPP: {
        isOpen: false,
        htmlCode: ""
      }
    };
  },
  methods: {
    termsOfUse() {
      if (this.$store.getters.getServeTF || !this.configTO.htmlCode) {
        getTermsOfUse().then(res => {
          console.log(res.data);
          let { code, data } = res.data;
          if (code == "200") {
            this.$store.dispatch("editTermsOfUse", false);
            this.configTO.htmlCode = data;
            this.configTO.isOpen = true;
          }
        });
      } else {
        this.configTO.isOpen = true;
      }
    },
    privacyPolicy() {
      if (this.$store.getters.getServePP || !this.configPP.htmlCode) {
        getPrivacyPolicy().then(res => {
          console.log(res.data);
          let { code, data } = res.data;
          if (code == "200") {
            this.$store.dispatch("editPrivacyPolicy", false);
            this.configPP.htmlCode = data;
            this.configPP.isOpen = true;
          }
        });
      } else {
        this.configPP.isOpen = true;
      }
    }
  },
  computed: {
    companyInfo() {
      return this.$store.getters.companyInfo;
    }
  }
};
</script>
<style>
footer.page-footer {
  height: 80px;
  background: #444d58;
  color: #f1f1f1;
  font-size: 14px;
  box-shadow: 6px -10px 20px rgba(0, 0, 0, 0.24);
  margin-bottom: -2px;
}
@media screen and (max-width: 400px) {
  footer.page-footer {
    height: 90px;
  }
}
</style>
